<script setup lang="ts">
import Map3D from './index.vue'
import geoData from './assets/data/geoData.json'
import blockData from './assets/data/blockData.json'
import flyLineData from './assets/data/flyLineData.json'
import { mapConfig, blockConfig, flyLineConfig } from './assets/data/config.block'

import scatterData from './assets/data/scatterData.json'
import { scatterConfig } from './assets/data/config'

const mapEnv = {
  envLightIntensity: 4,
  envLightColor: '#ffffff',
  envLightGroup: '1'
}

const slotConfig = {
  nodeStyle: {
    color: '#fff',
    fontSize: 16,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    padding: [10, 10],
    borderRadius: 5,
    position: 'relative',
    top: '-15px'
  },
  labelStyle: {
    maxWidth: '272px',
    padding: '12px',
    background: '#fff',
    color: '#333',
    fontSize: '14px',
    borderRadius: '4px',
    position: 'relative',
    top: '-50px',
    opacity: 0.9
  },
  labelPosition: {
    x: 0,
    y: 0
  },
  nodeScale: 1,
  nodeScaleSelected: 2
}

const slotData = [
  {
    // position: [115.748575, 39.206731],
    name: '易县',
    node: '<div>111</div>'
    // tooltip: '<div>222</div>'
  },
  {
    name: '唐县',
    // position: [114.654101, 38.700739],
    node: '<div>333</div>'
    // tooltip: '<div>444</div>'
  },
  {
    name: '顺平县',
    // position: [115.66346, 38.523533],
    node: '<div>555</div>'
    // tooltip: '<div>666</div>'
  }
]
</script>

<template>
  <div class="root">
    <Map3D :geo-data="geoData" :map-config="mapConfig" :map-env="mapEnv" :slot-config="slotConfig" :slot-data="slotData" />
    <!-- <Map3D :geo-data="geoData" :map-config="mapConfig" :map-env="mapEnv" :scatter-config="scatterConfig" :scatter-data="scatterData" /> -->
  </div>
</template>

<style scoped lang="less">
.root {
  background: #051f40;
  border: 1px solid #ccc;
  // width: 100%;
  // height: 100%;
  width: 70%;
  height: 800px;
  // transform: translate(100px, 100px);
  margin-top: 10vh;
  margin-left: 200px;
}
</style>
